<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header">
			<el-form ref="queryForm" :model="queryForm" class="header-area" label-width="80px" style="height:auto">
				<el-row>
					<el-col :span="5">
						<el-form-item label="商品名称" prop="productName">
							<el-input type="text" v-model="queryForm.productName" placeholder="请输入商品名称"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="5">
						<el-form-item label="展示位置" prop="moduleNo">
							<el-select v-model="queryForm.moduleNo" placeholder="请选择" style="width: 100%;">
								<el-option label="不限" value=""></el-option>
								<el-option label="首页平台推荐" value="index-platform"></el-option>
								<el-option label="首页店铺(自营)推荐" value="index-shop"></el-option>
								<el-option label="首页底部橱窗" value="index-bottom"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="5">
						<el-form-item label="销售状态" prop="saleStatus">
							<el-select v-model="queryForm.saleStatus" placeholder="请选择" style="width: 100%;">
								<el-option label="全部" value=""></el-option>
								<el-option label="已停售" value="0"></el-option>
								<el-option label="在售中" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" @click="submitForm('queryForm')">查询</el-button>
							<el-button @click="resetForm('queryForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<!-- 列表部分 -->
		<template>
			<!-- 表格上方的按钮 -->
			<div class="table-header">
				<el-button type="primary" @click="add">添加橱窗商品</el-button>
			</div>
			
			<el-table :data="tableData" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="showImage" label="缩略图" width="120" align="center">
					<template slot-scope="scope">
						<el-image style="width: 50px; height: 50px" :src="scope.row.showImage" :preview-src-list="[scope.row.showImage]"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" align="center"></el-table-column>
				<el-table-column prop="shopName" label="所属店铺" align="center" width="200"></el-table-column>
				
				<el-table-column prop="saleStatus" label="展示位置" align="center" width="160">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.moduleNo == 'index-platform'">首页平台推荐</el-tag>
						<el-tag type="primary" v-else-if="scope.row.moduleNo == 'index-shop'">首页店铺(自营)推荐</el-tag>
						<el-tag type="warning" v-else-if="scope.row.moduleNo == 'index-bottom'">首页底部橱窗</el-tag>
						<el-tag type="info" v-else>专题页商品</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column prop="priceShow" label="原价" :formatter="forMoney" align="center" width="120"></el-table-column>
				<el-table-column prop="price" label="销售价" :formatter="forMoney" align="center" width="120"></el-table-column>
				<el-table-column label="购物券" align="center" width="120">
					<template slot-scope="scope">
						{{scope.row.memberPrice}}元+{{scope.row.couponAmount}}券
					</template>
				</el-table-column>
				<el-table-column prop="rechargePrice" label="充值会员价" :formatter="forMoney" align="center" width="120"></el-table-column>
				
				<el-table-column prop="saleStatus" label="售卖状态" align="center" width="120">
					<template slot-scope="scope">
						<el-tag :type="scope.row.saleStatus === 1 ? 'success' : 'info'" disable-transitions>{{scope.row.saleStatus == 0 ? "已停售" : "在售中"}}</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column label="操作" fixed="right" width="170">
					<template slot-scope="scope">
						<el-button type="success" size="mini" @click="setStatus(scope.row, 'onSale')" v-if="scope.row.saleStatus == 0">起售</el-button>
						<el-button type="danger" size="mini" @click="setStatus(scope.row, 'offSale')" v-if="scope.row.saleStatus == 1">停售</el-button>
						<el-button type="info" size="mini" @click.native.prevent="removeProduct(scope.row)">移除商品</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 翻页 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>
		</template>
		
		<template>
			<!-- 添加商品弹窗 -->
			<handle-display-product-dialog
				:isShow="showHandleDialog"
				:item="currentItem"
				:isEdit="isEdit"
				@submit="fetchData"
				@close="closeHandleDialog"
			></handle-display-product-dialog>
		</template>
	</d2-container>
</template>

<script>
	import dayjs from 'dayjs'
	import { getDisplayProductList, setSpecialPageProductStatus } from '@api/platform/platformMarketing'
	import handleDisplayProductDialog from './components/handle-display-product-dialog'
	export default {
		components: {
			handleDisplayProductDialog,
		},
		data() {
			return {
				queryForm: {
					moduleNo: '',
					productName: '',
					saleStatus: '',
				},
				tableData: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				
				showHandleDialog: false, //添加修改弹窗
				currentItem: {},
				isEdit: false,
			}
		},
		methods: {
			fetchData() {
				if(this.loading) {
					return;
				}
				this.loading = true;
				
				getDisplayProductList({
					showcaseType: 'fix',
					moduleNo: this.queryForm.moduleNo,
					productName: this.queryForm.productName,
					saleStatus: this.queryForm.saleStatus,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
						this.loading = false;
					})
					.catch(err => {
						console.log('err', err);
						this.loading = false;
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.fetchData();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.fetchData();
			},
			resetPage() {
				this.currentPage = 1;
				this.pageSize = 10;
				this.total = 0;
			},
			forMoney(row, column) { //价格格式化
				if(column.property == 'priceShow') {
					return row.priceShow ? row.priceShow.toFixed(2) + '元' : '0.00元';
				}
				if(column.property == 'price') {
					return row.price ? row.price.toFixed(2) + '元' : '0.00元';
				}
				if(column.property == 'rechargePrice') {
					return row.rechargePrice ? row.rechargePrice.toFixed(2) + '元' : '0.00元';
				}
			},
			forDate(row, column) { //时间格式化
				if(column.property == 'startTime') {
					return row.startTime == null ? '-' : dayjs(row.startTime).format('YYYY-MM-DD HH:mm:ss');
				}
				if(column.property == 'endTime') {
					return row.endTime == null ? '-' : dayjs(row.endTime).format('YYYY-MM-DD HH:mm:ss');
				}
			},
			
			submitForm(formName) {
				this.resetPage();
				this.fetchData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.fetchData();
			},
			
			add() { //添加信息
				this.showHandleDialog = true;
			},
			edit(item) { //编辑信息
				this.currentItem = item;
				this.isEdit = true;
				this.showHandleDialog = true;
			},
			closeHandleDialog() {
				this.showHandleDialog = false;
			},
			
			//列表操作
			setStatus(item, type) {
				setSpecialPageProductStatus({
					showcaseId: item.id,
					action: type,
				})
					.then(() => {
						this.$message.success('操作成功！');
						this.fetchData();
					})
			},
			removeProduct(item) {
				this.$confirm(`您是否确定移除商品【${item.productName}】？移除操作不可撤销！`)
					.then(() => {
						setSpecialPageProductStatus({
							showcaseId: item.id,
							action: 'remove',
						})
							.then(() => {
								this.$message.success('商品移除成功！');
								this.fetchData();
							})
					})
			},
		},
		mounted() {
			this.fetchData();
		}
	}
</script>

<style>
</style>